<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="../../static/css/jpetstore.css"/>
    <meta charset="UTF-8">
    <title>All Goods</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />

</head>
<body>

<div th:replace="common/left">

</div>

<div id="BackLink">
    <a href="/admin_catalog/admin_addGood">Return to Add</a>
</div>

<div id="Catalog">
    <form action="/admin_catalog/addItem" method="post" th:object="${newItem}">

        <h3>Add New Item</h3>

        <table id="itemform">
            <tr>
                <td>Category ID:</td>
                <td>
                    <select th:field="*{categoryId}">
                        <option th:each="categoryId:${CATEGORY_LIST}" th:value="${categoryId}" th:text="${categoryId}">

                        </option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Product ID:</td>
                <td>
                    <select th:field="*{productId}">
                        <option th:each="productId:${PRODUCT_LIST}" th:value="${productId}" th:text="${productId}">

                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Item ID:</td>
                <td>
                    <!--                    <img th:src="${product.descriptionImage}">-->
                    <input id="itemId" type="text" onblur="checkItemId()" th:field="*{itemId}" />
                </td>
                <span id="isExistInfo"></span>
            </tr>
            <tr>
                <td>Description</td>
                <td>
                    <input id="attribute1" type="text" th:field="*{attribute1}" />
                </td>
            </tr>
            <tr>
                <td>List Price</td>
                <td>
                    <input id="listPrice" type="text" th:field="*{listPrice}" />
                </td>
            </tr>
            <tr>
                <td>Quantity</td>
                <td>
                    <input id="quantity" type="text" th:field="*{quantity}" />
                </td>
            </tr>
        </table>

        <input type="submit" name="addItem" value="Save"/>

    </form>
    <script>
        var xhr;
        function checkItemId() {
            var itemId = document.getElementById('itemId').value;
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = process;
            xhr.open("GET","/admin/CheckItemId?itemId="+itemId,true);
            xhr.send(null);
        }
        function process(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var responseInfo = xhr.responseText;
                    var msg = document.getElementById('isExistInfo');
                    if(responseInfo == 'Not Exist'){
                        msg.innerText = 'This Id is available!';
                        msg.style.color = "green";

                    }else if(responseInfo == 'Exist'){
                        msg.innerText = 'Sorry,this id is used.';
                        msg.style.color = "red";
                    }
                }
            }
        }

    </script>

</div>

</body>
</html>